<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-xl-12">
            <h1 class="page-header">
                Charts
            </h1>
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-dashboard"></i>
                    <a href="Javascript:void(0)" routerLink="/dashboard/home" > Dashboard</a>
                </li>
                <li class="active">
                    <i class="fa fa-fw fa-bar-chart-o"></i> High Chart
                </li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-6">
            <div class="card card-block">
                <div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card card-block">
                <div id="area-chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
            </div>
        </div>
        <h1>&nbsp;</h1>
        <div class="col-xl-6">
            <div class="card card-block">
                <div id="total-fruit" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card card-block">
                <div id="snow-depth" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
            </div>
        </div>
    </div>
</div>